﻿<div class="WAll PT">
	
	<div class="ContentBlockTitle">完整表单</div>
	<ul class="ListBlock">
		<li class="ListItem">
			<div class="ItemCon">
				<div class="ItemMedia">
					<img class="Icon" src="images/svg/iconfont-user.svg" alt="用户" />
				</div>
				<div class="ItemInner">
					<div class="ItemTitle Label">姓名</div>
					<div class="ItemInput">
						<input class="InputContr" type="text" placeholder="您的姓名"/>
					</div>
				</div>
			</div>
		</li>
		<li class="ListItem">
			<div class="ItemCon">
				<div class="ItemMedia">
					<img class="Icon" src="images/svg/iconfont-noread.svg" alt="邮箱" />
				</div>
				<div class="ItemInner">
					<div class="ItemTitle Label">邮箱地址</div>
					<div class="ItemInput">
						<input class="InputContr" type="email" placeholder="您的邮箱"/>
					</div>
				</div>
			</div>
		</li>
		<li class="ListItem">
			<div class="ItemCon">
				<div class="ItemMedia">
					<img class="Icon" src="images/svg/iconfont-wangluo.svg" alt="网络" />
				</div>
				<div class="ItemInner">
					<div class="ItemTitle Label">网址</div>
					<div class="ItemInput">
						<input class="InputContr" type="url" placeholder="请输入网址"/>
					</div>
				</div>
			</div>
		</li>
		<li class="ListItem">
			<div class="ItemCon">
				<div class="ItemMedia">
					<img class="Icon" src="images/svg/iconfont-password.svg" alt="密码" />
				</div>
				<div class="ItemInner">
					<div class="ItemTitle Label">密码</div>
					<div class="ItemInput">
						<input class="InputContr" type="password" placeholder="请输入密码"/>
					</div>
				</div>
			</div>
		</li>
		<li class="ListItem">
			<div class="ItemCon">
				<div class="ItemMedia">
					<img class="Icon" src="images/svg/iconfont-call.svg" alt="电话" />
				</div>
				<div class="ItemInner">
					<div class="ItemTitle Label">电话</div>
					<div class="ItemInput">
						<input class="InputContr" type="tel" placeholder="请输入电话号码"/>
					</div>
				</div>
			</div>
		</li>
		<li class="ListItem">
			<div class="ItemCon">
				<div class="ItemMedia">
					<img class="Icon" src="images/svg/iconfont-gender.svg" alt="性别" />
				</div>
				<div class="ItemInner">
					<div class="ItemTitle Label">性别</div>
					<div class="ItemInput">
						<select class="InputContr">
							<option>男</option>
							<option>女</option>
						</select>
					</div>
				</div>
			</div>
		</li>
		<li class="ListItem">
			<div class="ItemCon">
				<div class="ItemMedia">
					<img class="Icon" src="images/svg/iconfont-date.svg" alt="日期" />
				</div>
				<div class="ItemInner">
					<div class="ItemTitle Label">出生日期</div>
					<div class="ItemInput">
						<input type="date"  class="InputContr" placeholder="出生日期" value="2014-04-30"/>
					</div>
				</div>
			</div>
		</li>
		<li class="ListItem">
			<div class="ItemCon">
				<div class="ItemMedia">
					<img class="Icon" src="images/svg/iconfont-date.svg" alt="日期" />
				</div>
				<div class="ItemInner">
					<div class="ItemTitle Label">日期时间</div>
					<div class="ItemInput">
						<input type="datetime-local"  class="InputContr" placeholder="出生日期" value="2014-04-30"/>
					</div>
				</div>
			</div>
		</li>
		<li class="ListItem">
			<div class="ItemCon">
				<div class="ItemMedia">
					<img class="Icon" src="images/svg/iconfont-toggleoff.svg" alt="开关" />
				</div>
				<div class="ItemInner">
					<div class="ItemTitle Label">开关</div>
					<div class="ItemInput">
						<label class="LabelSwitch">
							<input type="checkbox">
							<div class="checkbox"></div>
						</label>
					</div>
				</div>
			</div>
		</li>
		<li class="ListItem">
			<div class="ItemCon">
				<div class="ItemMedia">
					<img class="Icon" src="images/svg/iconfont-sliders.svg" alt="滑块" />
				</div>
				<div class="ItemInner">
					<div class="ItemTitle Label">滑块</div>
					<div class="ItemInput">
						<div class="RangeSlider">
							<input type="range" min="0" max="100" value="50" step="0.6">
						</div>
					</div>
				</div>
			</div>
		</li>
		<li class="ListItem AlignTop">
			<div class="ItemCon">
				<div class="ItemMedia">
					<img class="Icon" src="images/svg/iconfont-message.svg" alt="消息" />
				</div>
				<div class="ItemInner">
					<div class="ItemTitle Label">备注</div>
					<div class="ItemInput">
						<textarea class="InputContr "></textarea>
					</div>
				</div>
			</div>
		</li>
		<li class="ListItem AlignTop">
			<div class="ItemCon">
				<div class="ItemMedia">
					<img class="Icon" src="images/svg/iconfont-message.svg" alt="消息" />
				</div>
				<div class="ItemInner">
					<div class="ItemTitle Label">调整大小</div>
					<div class="ItemInput">
						<textarea class="InputContr Resizeable"></textarea>
					</div>
				</div>
			</div>
		</li>
	</ul>
	
	<div class="ContentBlockTitle">标签和输入</div>
	<ul class="ListBlock">
		<li class="ListItem">
			<div class="ItemCon">
				<div class="ItemInner">
					<div class="ItemTitle Label">姓名</div>
					<div class="ItemInput">
						<input class="InputContr" type="text" placeholder="您的姓名"/>
					</div>
				</div>
			</div>
		</li>
		<li class="ListItem">
			<div class="ItemCon">
				<div class="ItemInner">
					<div class="ItemTitle Label">邮箱地址</div>
					<div class="ItemInput">
						<input class="InputContr" type="email" placeholder="您的邮箱"/>
					</div>
				</div>
			</div>
		</li>
		<li class="ListItem">
			<div class="ItemCon">
				<div class="ItemInner">
					<div class="ItemTitle Label">网址</div>
					<div class="ItemInput">
						<input class="InputContr" type="url" placeholder="请输入网址"/>
					</div>
				</div>
			</div>
		</li>
		<li class="ListItem">
			<div class="ItemCon">
				<div class="ItemInner">
					<div class="ItemTitle Label">开关</div>
					<div class="ItemInput">
						<label class="LabelSwitch">
							<input type="checkbox">
							<div class="checkbox"></div>
						</label>
					</div>
				</div>
			</div>
		</li>
		<li class="ListItem">
			<div class="ItemCon">
				<div class="ItemInner">
					<div class="ItemTitle Label">滑块</div>
					<div class="ItemInput">
						<div class="RangeSlider">
							<input type="range" min="0" max="100" value="50" step="0.6">
						</div>
					</div>
				</div>
			</div>
		</li>
	</ul>
	
	<div class="ContentBlockTitle">图标和输入</div>

	<ul class="ListBlock">
		<li class="ListItem">
			<div class="ItemCon">
				<div class="ItemMedia">
					<img class="Icon" src="images/svg/iconfont-user.svg" alt="用户" />
				</div>
				<div class="ItemInner">
					<div class="ItemInput">
						<input class="InputContr" type="text" placeholder="您的姓名"/>
					</div>
				</div>
			</div>
		</li>
		<li class="ListItem">
			<div class="ItemCon">
				<div class="ItemMedia">
					<img class="Icon" src="images/svg/iconfont-noread.svg" alt="邮箱" />
				</div>
				<div class="ItemInner">
					<div class="ItemInput">
						<input class="InputContr" type="email" placeholder="您的邮箱"/>
					</div>
				</div>
			</div>
		</li>
		<li class="ListItem">
			<div class="ItemCon">
				<div class="ItemMedia">
					<img class="Icon" src="images/svg/iconfont-wangluo.svg" alt="网络" />
				</div>
				<div class="ItemInner">
					<div class="ItemInput">
						<input class="InputContr" type="url" placeholder="请输入网址"/>
					</div>
				</div>
			</div>
		</li>
		<li class="ListItem">
			<div class="ItemCon">
				<div class="ItemMedia">
					<img class="Icon" src="images/svg/iconfont-password.svg" alt="密码" />
				</div>
				<div class="ItemInner">
					<div class="ItemInput">
						<input class="InputContr" type="password" placeholder="请输入密码"/>
					</div>
				</div>
			</div>
		</li>
		<li class="ListItem">
			<div class="ItemCon">
				<div class="ItemMedia">
					<img class="Icon" src="images/svg/iconfont-call.svg" alt="电话" />
				</div>
				<div class="ItemInner">
					<div class="ItemInput">
						<input class="InputContr" type="tel" placeholder="请输入电话号码"/>
					</div>
				</div>
			</div>
		</li>
	</ul>
	
	<div class="ContentBlockTitle">只是输入</div>

	<ul class="ListBlock">
		<li class="ListItem">
			<div class="ItemCon">
				<div class="ItemInner">
					<div class="ItemInput">
						<input class="InputContr" type="text" placeholder="您的姓名"/>
					</div>
				</div>
			</div>
		</li>
		<li class="ListItem">
			<div class="ItemCon">
				<div class="ItemInner">
					<div class="ItemInput">
						<input class="InputContr" type="email" placeholder="您的邮箱"/>
					</div>
				</div>
			</div>
		</li>
		<li class="ListItem">
			<div class="ItemCon">
				<div class="ItemInner">
					<div class="ItemInput">
						<input class="InputContr" type="url" placeholder="请输入网址"/>
					</div>
				</div>
			</div>
		</li>
		<li class="ListItem">
			<div class="ItemCon">
				<div class="ItemInner">
					<div class="ItemInput">
						<input class="InputContr" type="password" placeholder="请输入密码"/>
					</div>
				</div>
			</div>
		</li>
		<li class="ListItem">
			<div class="ItemCon">
				<div class="ItemInner">
					<div class="ItemInput">
						<input class="InputContr" type="tel" placeholder="请输入密码"/>
					</div>
				</div>
			</div>
		</li>
	</ul>

	<div class="ContentBlockTitle">卡片输入</div>

	<ul class="ListBlock ListCard">
		<li class="ListItem">
			<div class="ItemCon">
				<div class="ItemInner">
					<div class="ItemInput">
						<input class="InputContr" type="text" placeholder="您的姓名"/>
					</div>
				</div>
			</div>
		</li>
		<li class="ListItem">
			<div class="ItemCon">
				<div class="ItemInner">
					<div class="ItemInput">
						<input class="InputContr" type="email" placeholder="您的邮箱"/>
					</div>
				</div>
			</div>
		</li>
		<li class="ListItem">
			<div class="ItemCon">
				<div class="ItemInner">
					<div class="ItemInput">
						<input class="InputContr" type="url" placeholder="请输入网址"/>
					</div>
				</div>
			</div>
		</li>
		<li class="ListItem">
			<div class="ItemCon">
				<div class="ItemInner">
					<div class="ItemInput">
						<input class="InputContr" type="password" placeholder="请输入密码"/>
					</div>
				</div>
			</div>
		</li>
		<li class="ListItem">
			<div class="ItemCon">
				<div class="ItemInner">
					<div class="ItemInput">
						<input class="InputContr" type="tel" placeholder="请输入电话号码"/>
					</div>
				</div>
			</div>
		</li>
	</ul>


</div>




















